<template>
	<div class="content">
		<Input v-model="name" :placeholder="nameplacehold" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="age" :placeholder="ageplacehold" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="id" :placeholder="idplacehold" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="mobile" :placeholder="mobileplacehold" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="address" :placeholder="addressplacehold" style="width: 90%;margin-top: 10px"></Input>
	</div>
</template>

<script>
import Vue from 'vue';
import i18n from '../../static/lang/i18n';

export default {
	name: 'Forminfo',
	data() {
		return {
			name: null,
			mobile: null,
			id: null,
			age: null,
			address: null
		};
	},
	computed: {
		nameplacehold() {
			// eslint-disable-next-line no-undef
			let Constructor = Vue.extend(module.default);
			let vm = new Constructor({ el: '#mount-individual', i18n });
			if (this.name) {
				return '';
			}
			return vm.$t('ivcs.plname');
		},

		mobileplacehold() {
			// eslint-disable-next-line no-undef
			let Constructor = Vue.extend(module.default);
			let vm = new Constructor({ el: '#mount-individual', i18n });
			if (this.mobile) {
				return '';
			}
			return vm.$t('ivcs.plmobile');
		},

		idplacehold() {
			// eslint-disable-next-line no-undef
			let Constructor = Vue.extend(module.default);
			let vm = new Constructor({ el: '#mount-individual', i18n });
			if (this.id) {
				return '';
			}
			return vm.$t('ivcs.plidcard');
		},

		ageplacehold() {
			// eslint-disable-next-line no-undef
			let Constructor = Vue.extend(module.default);
			let vm = new Constructor({ el: '#mount-individual', i18n });
			if (this.age) {
				return '';
			}
			return vm.$t('ivcs.plage');
		},

		addressplacehold() {
			// eslint-disable-next-line no-undef
			let Constructor = Vue.extend(module.default);
			let vm = new Constructor({ el: '#mount-individual', i18n });
			if (this.address) {
				return '';
			}
			return vm.$t('ivcs.pladdress');
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 250px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.select {
	width: 90%;
	margin-top: 10px;
}
</style>
